<template>
	<!-- 招考信息详情 -->
	<view class="pb134">
		<view class="">
			<!-- 顶部轮播图 -->
			<!-- <u-swiper :list="list" height='466' mode="number" indicator-pos='bottomRight' border-radius='0'></u-swiper> -->
			<image :src="$baseUrl+data.image" class="h466 topimg"></image>
			<!-- /顶部轮播图 -->
			<view class="bigbox pt32">
				<!-- 价格盒子 -->
				<view class="box-info flex row-between">
					<view class="mb44">
						<text class="box-pic mr26">￥{{data.price}}</text>
						<text class="box-Opic">￥{{data.price_end}}</text>
					</view>
					<text class="payNum"><text class="paytxt">已售</text>{{data.sign_sold*1+data.fictitious_sold*1}}</text>
				</view>
				<!-- /价格盒子 -->

				<!-- 标题盒子 -->
				<view class="box-tit">{{data.title}}</view>
				<!-- /标题盒子 -->
			</view>

			<!-- 详情盒子 -->
			<view class="box-detail mt4 pt60">
				<text class="pl20 box-detail-tit">详情介绍</text>
				<view class="p20r">
					<u-parse :html="data.content"></u-parse>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footerBox flex row-between pl60 pr20 pt20 pb20 col-center">
			<view class="flex row-column col-center" @tap="$tool.phone(data.iphone)">
				<image src="/static/img/index/liepinTell.png" mode="" class="w56 h56"></image>
				<text>打电话</text>
			</view>
			<view class="flex row-column col-center">
				<image src="/static/img/index/3liepin-liao.png" mode="" class="w56 h56"></image>
				<text>聊一聊</text>
			</view>
			<view class="w400 h80 footerBtn" @tap="showPay=true">
				立即购买
			</view>
		</view>
		<!-- /底部 -->
		<u-popup v-model="showPay" mode="center" :closeable="true" border-radius="14">
			<view class="p60r pb30 bg-fff">
				<u-radio-group v-model="paytype" class="w500r">
					<view class="w-max x-bc">
						<u-radio v-for="(item, index) in pays" :key="index" :name="item.type" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</view>
				</u-radio-group>
				<view class="w-max mt50 x-c fs34 h80r bg-zs color-fff bor-rad14r" @tap="paytype==3?show=true:submit()">确认</view>
			</view>
		</u-popup>
		
		<!-- 支付键盘 -->
		<u-keyboard
			default=""
			ref="uKeyboard" 
			mode="number" 
			:mask="true" 
			:mask-close-able="false"
			:dot-enabled="false" 
			v-model="show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input 
						mode="box" 
						:maxlength="6"
						:dot-fill="true"
						v-model="password"
						:disabled-keyboard="true"
						@finish="finish"
					></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
		<!-- 支付键盘 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paytype: 1,
				pays: [{
						name: '微信',
						type: 1,
					},
					{
						name: '支付宝',
						type: 2,
					},
					{
						name: '余额',
						type: 3,
					},
				],
				showPay: false,
				//支付键盘
				show:false,
				// list: [{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				// 		title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// 	},
				// 	// {
				// 	// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
				// 	// 	title: '身无彩凤双飞翼，心有灵犀一点通'
				// 	// },
				// 	// {
				// 	// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
				// 	// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// 	// }
				// ],
				id: '',
				type: 1,
				data: '',
				password:''
			};
		},
		onLoad(e) {
			this.type = e.type
			this.id = e.id
		},
		onShow() {
			this.writtenDetails()
		},
		methods: {
			writtenDetails() {
				let data = {
					id: this.id,
					password_pay:this.password
				}
				let api = ''
				if (this.type == 1) {
					api = 'writtenDetails'
				} else if (this.type == 2) {
					api = 'interviewDetails'
				}
				this.$api[api](data).then(res => {
					this.data = res.data
				})
			},
			submit() {
				let data = {
					id: this.id,
					type: this.paytype
				}
				let api = ''
				if (this.type == 1) {
					api = 'writtenPay'
				} else if (this.type == 2) {
					api = 'interviewPay'
				}
				this.$api[api](data).then(res => {
					if (this.paytype == 3) {
						this.$msg(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
						return
					}
					let provider, orderInfo
					if (this.paytype == 1) {
						provider = 'wxpay'
						orderInfo = JSON.parse(res.data)
					}
					if (this.paytype == 2) {
						provider = 'alipay'
						orderInfo = res.data
					}
					uni.requestPayment({
						provider,
						orderInfo,
						success: res => {
							that.$msg("支付成功")
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						},
						fail: () => {
							that.$msg("支付失败")
						},
						complete: () => {}
					});
				}).catch(err=>{
					this.password=''
				})
			},
			
			//支付弹层
			onChange(val){
				if(this.password.length<6){
					this.password += val;
				}
				
				if(this.password.length>=6){
					this.pay();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			pay(){
				this.submit()
				this.show=false
			},
			showPop(flag = true){
				this.password = '';
				this.show = flag;
			},
			finish(){
				console.log(11111)
			}
		}
	}
</script>

<style lang="scss">
	.bigbox {
		background-color: #FFFFFF;
	}

.topimg {
	width: 100%;
}
	.box-info {
		.box-pic {
			font-size: 32rpx;
			color: #FD1D4D;
		}

		.box-Opic {
			font-size: 30rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #6D788B;
		}

		.payNum {
			font-size: 26rpx;
			font-weight: 500;
			color: #1385FF;

			.paytxt {
				color: #6D788B;
			}
		}
	}

	.box-detail {
		background-color: #FFFFFF;

		image {
			display: block;
			width: 100%;
		}

		.box-detail-tit {
			font-size: 30rpx;
			color: #0C162E;
		}

		.box-detail-txt {
			text-indent: 2em;
			font-size: 22rpx;
			font-weight: 500;
			color: #6D788B;
			line-height: 40rpx;
		}
	}

	.footerBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;

		.footerBtn {
			background: #1385FF;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>
